<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/static/pear/component/pear/css/pear.css" />
</head>
<body class="pear-container">
<div class="layui-row">
    <form class="layui-form">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="main-container">
                    <div class="layui-tab" lay-filter="TabBrief">
                        <ul class="layui-tab-title">
                            <li class="layui-this">图文</li>
                            <li>文档</li>
                            <li>外链</li>
                            <li><a href="{:url('test')}">测试</a></li>
                            <li><a href="{:url('survey')}">Survey</a></li>
                        </ul>
                        <div class="layui-tab-content">

                            <div class="layui-form-item">
                                <label class="layui-form-label">课件名称*(CN)</label>
                                <div class="layui-input-block">
                                    <input type="text" lay-verify="required" name="title" autocomplete="off" placeholder="请填写课件名称(CN)" class="layui-input" style="width: 50%">
                                    <div class="layui-form-mid layui-word-aux">Tips：请确保标题不包含：: \ / ? * [ ] 符号，谢谢！</div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">课件名称*(EN)</label>
                                <div class="layui-input-block">
                                    <input type="text" lay-verify="required" name="e_title" autocomplete="off" placeholder="请填写课件名称(EN)" class="layui-input" style="width: 50%">
                                    <div class="layui-form-mid layui-word-aux">Tips：请确保标题不包含：: \ / ? * [ ] 符号，谢谢！</div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">课件时长*</label>
                                <div class="layui-input-block">
                                    <input type="number" lay-verify="required" name="duration" autocomplete="off" placeholder="请输入学习时长 单位:分钟" class="layui-input" style="width: 50%">
                                    <div class="layui-form-mid layui-word-aux">Tips：请根据视频实际时长填写，例：4:13秒 填写4；5:40秒 填写5。视频音频由于倍速，请填写小于等于1/2 时长并保留整数，PDF文档请统一填写1分钟</div>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">课件分类*</label>
                                <div class="layui-input-block" style="width: 50%">
                                    <select name="cate_id" lay-verify="required">
                                        <option value="">请选择课件分类</option>
                                        {volist name="cate" id="vo"}
                                        <option value="{$vo.id}">{$vo.title}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">课件标签*</label>
                                <div class="layui-input-block" style="width: 50%">
                                    <select name="label_id" xm-select="select4" xm-select-skin="default" lay-verify="required">
                                        {volist name="label" id="vo"}
                                        <option value="{$vo.id}">{$vo.title}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">是否公开*</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="open" value="1" title="公开" checked>
                                    <input type="radio" name="open" value="2" title="非公开">
                                </div>
                                <div class="layui-form-mid layui-word-aux">Tips：公开课件可供所有有资源库权限的用户复制和引用。</div>
                            </div>


                            <div class="layui-tab-item layui-show">
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">内容*</label>
                                    <div class="layui-input-block">
                                        <textarea name="content" id="content" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">相关附件*</label>
                                    <div class="layui-input-block" style="display: flex;">
                                        <div class="layui-upload-drag" id="upload">
                                            <i class="layui-icon"></i>
                                            <p>点击上传，或将文件拖拽到此处。支持格式：docx、doc、pdf、mp4、jpg、png、mov、mp3，最大不超过200M。文档建议不要超过20M</p>
                                        </div>
                                        <input type="hidden" name="path" id="path">
                                    </div>
                                </div>
                                <div class="layui-input-block">
                                    <div class="layui-form-mid layui-word-aux" id="file"></div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">下载文档*</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="download" value="1" title="允许" checked>
                                        <input type="radio" name="download" value="2" title="不允许">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">外部链接*</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="link_url" autocomplete="off" placeholder="请填写完整的外部链接" class="layui-input" style="width: 50%">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {:token_field()}
                    <input type="hidden" name="type" id="type" value="1">
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-layout-admin" style="text-align: center">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;z-index: 1000 !important;">
                    <button class="layui-btn" lay-submit lay-filter="user-save">提交</button>
                </div>

            </div>
        </div>
    </form>
</div>

{include file="_Fragment/javascript" /}
<script>
    layui.use(['form', 'jquery', 'element', 'select', 'tinymce', 'upload'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let element = layui.element;
        let select = layui.select;
        let tinymce = layui.tinymce;
        let upload = layui.upload;


        var content = tinymce.render({
            elem: "#content",
            height: 400,
            images_upload_url: "{:url('Pub/blob')}",
            form: {name:'file'}
        });


        //+文件上传
        upload.render({
            elem: '#upload' //绑定元素
            ,url: "{:url('Pub/blobFile')}" //上传接口
            ,accept: 'file' //允许上传的文件类型
            ,size: 200*1024 //最大允许上传的文件大小
            ,exts:'doc|docx|pdf|mp4|jpg|png|mp3|mov'
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                obj.preview(function(index, file, result){
                    $('#file').text('当前选择文件为：'+file.name);
                });
                layer.load(); //上传loading
            }
            ,done: function(result){
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
                if (result.code == 200) {
                    layer.msg('上传成功', {
                        icon: 1,
                        time: 1000
                    });
                    $('input[name="path"]').val(result.data);
                }else{
                    layer.msg(result.msg);
                }
            }
            ,error: function(){
                //请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });


        element.on('tab(TabBrief)', function(data) {
            if(data.index == 2){
                $("#type").val(5);
            } else {
                $("#type").val((data.index + 1));
            }
        });

        select.render({
            placeholder: '请选择课件标签'
        });

        form.on('submit(user-save)', function(data) {

            let loading = layer.load();
            var contents = content.getContent();
            data.field.content = '';
            data.field.content += contents;

            $.ajax({
                url: '/Courseware/save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function(result) {
                    layer.close(loading);
                    if (result.status == 0) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 1000
                        });
                    }
                }
            })
            return false;
        });
    })
</script>
<script>
</script>
</body>
</html>